<template>
	<view :data-theme="theme" class="merBox">
		<view class="productList">
			<!-- <div class="main_bg"></div> -->
			<useNavBar :title="$t(`page.goodsList.navTitle`)">
				<view
					slot="right"
					style="color: #fff"
					class="iconfont icon-more"
					@click="open"
				></view>
			</useNavBar>
			<view
				class="topFixed"
				:style="{
					top: 44 + $u.sys().statusBarHeight + 'px',
				}"
			>
				<view class="search bg_color acea-row row-between-wrapper">
					<view class="input acea-row row-between-wrapper"
						><text class="iconfont icon-sousuo"></text>
						<input
							:placeholder="$t(`page.goodsList.search`)"
							placeholder-class="placeholder"
							confirm-type="search"
							name="search"
							v-model="where.keyword"
							@confirm="searchSubmit"
							maxlength="20"
						/>
					</view>
					<view
						v-if="tabIndex === 1"
						class="iconfont icon-yangshi1"
						@click="Changswitch"
					></view>
					<view v-else class="iconfont icon-shaixuan" @click="open(2)"></view>
				</view>
				<view class="nav-wrapper" v-if="merId === 0 && where.cid === 0">
					<view class="tab-bar">
						<view
							class="tab-item"
							:class="{ on: tabIndex === 1 }"
							@click="changetab(1)"
							>{{ $t(`page.goodsSearch.goods`) }}</view
						>
						<view
							class="tab-item"
							:class="{ on: tabIndex === 2 }"
							@click="changetab(2)"
							>{{ $t(`page.goodsSearch.mer`) }}</view
						>
					</view>
				</view>

				<view
					class="nav acea-row row-center-wrapper"
					v-if="tabIndex === 1"
					:class="merId > 0 || where.cid > 0 ? 'mer-nav' : ''"
				>
					<view class="item" @click="set_where(1, tabIndex)">
						{{ title ? title : $t(`page.goodsList.default`) }}</view
					>
					<view class="item" @click="set_where(2, tabIndex)">
						{{ $t(`page.goodsList.price`) }}
						<image v-if="price == 1" src="../../static/images/up.png"></image>
						<image
							v-else-if="price == 2"
							src="../../static/images/down.png"
						></image>
						<image v-else src="../../static/images/horn.png"></image>
					</view>
					<view class="item" @click="set_where(3, tabIndex)">
						{{ $t(`page.goodsList.sales`) }}
						<image v-if="stock == 1" src="../../static/images/up.png"></image>
						<image
							v-else-if="stock == 2"
							src="../../static/images/down.png"
						></image>
						<image v-else src="../../static/images/horn.png"></image>
					</view>
				</view>
			</view>

			<view
				class=""
				v-if="tabIndex === 1 && productList.length > 0"
				:class="[
					is_switch == true ? 'proList' : 'listBox',
					isJump && 'proList2',
				]"
			>
				<view :class="[merId > 0 || where.cid > 0 ? 'mer-listBox' : '']">
					<view
						v-if="!is_switch"
						class="list acea-row row-between-wrapper"
						:class="[
							is_switch == true ? '' : 'on',
							merId > 0 || where.cid > 0 ? 'mer-list' : '',
						]"
					>
						<view
							class="item"
							:class="is_switch == true ? '' : 'on'"
							hover-class="none"
							v-for="(item, index) in productList"
							:key="index"
							@click="godDetail(item)"
						>
							<view class="pictrue" :class="is_switch == true ? '' : 'on'">
								<easy-loadimage
									:image-src="item.image"
									:class="is_switch == true ? '' : 'on'"
								></easy-loadimage>
							</view>
							<view class="text" :class="is_switch == true ? '' : 'on'">
								<view class="name line3">{{ item.storeName }}</view>
								<view
									class="vip acea-row row-between-wrapper"
									:class="is_switch == true ? '' : 'on'"
								>
									<view class="x-money" :class="is_switch == true ? '' : 'on'"
										><statistic :value="item.price" :currency="item.currency"
									/></view>
									<view
										>{{ Math.floor(item.sales) + Math.floor(item.ficti) || 0
										}}{{ $t(`message.tips.sold`) }}</view
									>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="goods">
						<WaterfallsFlow
							:wfList="productList"
							@itemTap="godDetail"
							:type="1"
							:isStore="1"
						/>
					</view>
				</view>
				<view class="loadingicon acea-row row-center-wrapper" v-if="loading">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false">
					</text>
				</view>
			</view>
			<view class="merList" v-if="tabIndex == 2">
				<merchant-list :merchantList="merchantList"></merchant-list>
				<view class="loadingicon acea-row row-center-wrapper" v-if="loading">
					<text
						class="loading iconfont icon-jiazai"
						:hidden="loading == false"
					></text>
				</view>
			</view>
			<view
				class="noCommodity"
				:class="[tabIndex !== 2 ? '' : 'noCommodity2']"
				:style="{
					marginTop: navBottom + 'px',
				}"
				v-if="
					(productList.length == 0 &&
						isShow &&
						where.page > 1 &&
						tabIndex === 1 &&
						!loading) ||
					(merchantList.length == 0 &&
						isShow &&
						where.page > 1 &&
						tabIndex === 2 &&
						!loading)
				"
			>
				<view class="pictrue text-center">
					<image
						v-if="tabIndex === 2"
						src="../../static/images/noShopper.png"
					></image>
					<image v-else src="../../static/images/noGoods.png"></image>
				</view>
				<text class="text-ccc">{{
					tabIndex === 1
						? $t(`page.goodsList.empty`)
						: $t(`page.goodsList.nomer`)
				}}</text>
				<recommend></recommend>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<merSeach
				@close="closeDrawer"
				@confirm="confirm"
				v-if="tabIndex == 2 && drawers === 2"
			></merSeach>
			<user-drawer @close="closeDrawer" v-else></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
import { getProductslist } from "@/api/store.js";
import { getMerSearchApi } from "@/api/merchant.js";
import merSeach from "@/components/merSeach/index.vue";
import merchantList from "@/components/merchantList/index.vue";
import { getMerProListApi } from "@/api/merchant.js";

import { goShopDetail } from "@/libs/order.js";
import { useAppStore } from "@/stores/app";
import { mapState } from "pinia";
import { mapToLang, isJSON } from "@/utils/index";
import statistic from "@/components/statistic";
const appStore = useAppStore();
export default {
	computed: {
		...mapState(useAppStore, ["uid"]),
		locale() {
			return mapToLang(this.$i18n.locale);
		},
		isJump() {
			return this.merId === 0 && this.where.cid === 0;
		},
	},
	components: {
		merchantList,
		merSeach,
		statistic,
	},
	mounted() {
		appStore.MerCategoryList();
		appStore.MerTypeList();

		const query = uni.createSelectorQuery();
		query
			.select(".topFixed")
			.boundingClientRect((data) => {
				console.log(data);
				this.navBottom = data.height;
			})
			.exec();
	},
	data() {
		return {
			skeletonShow: false,
			drawers: 0,
			tabIndex: 1,
			productList: [],
			is_switch: true,
			where: {
				keyword: "",
				priceOrder: "",
				salesOrder: "",
				news: 0,
				page: 1,
				limit: 20,
				cid: 0,
				merId: null,
			},
			price: 0,
			stock: 0,
			nows: 1,
			loadend: false,
			loading: false,
			loadTitle: this.$t(`page.goodsList.more`),
			title: "",
			hostProduct: [],
			hotPage: 1,
			hotLimit: 10,
			hotScroll: false,
			theme: "theme3",
			rightDrawer: false,
			whereMer: {
				categoryId: "",
				isSelf: "",
				keywords: "",
				page: 1,
				limit: 20,
				typeId: "",
			},
			merchantList: [],
			merId: 0,
			goodScroll: true,
			isShow: false,
			navBottom: 0,
		};
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t(`page.goodsList.navTitle`),
		});
		this.merId = options.merId ? Number(options.merId) : 0;
		if (options.cid) {
			this.$set(this.where, "cid", String(options.cid) || 0);
		}
		if (isJSON(options.title)) {
			this.title = JSON.parse(options.title)[this.locale];
		} else {
			this.title = options.title || "";
		}
		this.$set(this.where, "keyword", options.searchValue || "");
		this.$set(this.whereMer, "keywords", options.searchValue || "");
		if (this.tabIndex === 1) this.get_product_list();
	},
	methods: {
		confirm(data) {
			this.whereMer.typeId = data.typeId || "";
			this.whereMer.categoryId = data.categoryId;
			this.whereMer.keywords = this.where.keyword;
			this.loadend = false;
			this.$set(this.whereMer, "page", 1);
			this.merchantList = [];
			this.rightDrawer = false;
			this.getMerStreet();
		},
		changetab(n) {
			this.tabIndex = n;
			this.nows = 1;
			this.stock = 0;
			this.loadend = false;
			this.loading = false;
			if (n === 2) {
				this.merchantList = [];
				this.$set(this.whereMer, "page", 1);
				this.getMerStreet();
				this.title = "";
			}
			this.$nextTick(() => {
				const query = uni.createSelectorQuery();
				query
					.select(".topFixed")
					.boundingClientRect((data) => {
						console.log(data);
						this.navBottom = data.height;
					})
					.exec();
			});
		},
		open(n) {
			this.rightDrawer = true;
			this.drawers = n;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		goback() {
			uni.navigateBack();
		},
		getMerStreet: function (isPage) {
			this.skeletonShow = true;
			let that = this;
			that.setWhere();
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			if (isPage === true) that.$set(that, "merchantList", []);

			that.loadTitle = "";
			getMerSearchApi(that.whereMer)
				.then((res) => {
					let list = res.data.list;
					let merchantList = that.$util.SplitArray(list, that.merchantList);
					let loadend = list.length < that.whereMer.limit;
					that.loadend = loadend;
					that.loadTitle = loadend
						? this.$t("page.goodsList.no")
						: this.$t("page.goodsList.more");
					that.$set(that, "merchantList", merchantList);
					that.$set(that.whereMer, "page", that.whereMer.page + 1);
					that.loading = false;
					this.skeletonShow = false;
					this.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
					that.goodScroll = false;
					that.loadTitle = this.$t(`page.goodsList.more`);
				});
		},
		// 去详情页
		godDetail(item) {
			goShopDetail(item);
		},
		Changswitch: function () {
			let that = this;
			that.is_switch = !that.is_switch;
		},
		searchSubmit: function (e) {
			let that = this;
			that.loadend = false;
			that.$set(that.where, "keyword", e.detail.value);
			that.$set(that.whereMer, "keywords", e.detail.value);
			if (that.tabIndex === 1) {
				that.$set(that.where, "page", 1);
				this.get_product_list(true);
			} else {
				that.$set(that, "merchantList", []);
				this.$set(this.whereMer, "page", 1);
				this.getMerStreet();
			}
		},
		//点击事件处理
		set_where: function (e, n) {
			this.nows = e;
			switch (e) {
				case 1:
					this.price = 0;
					this.stock = 0;
					break;
				case 2:
					if (this.price == 0) this.price = 1;
					else if (this.price == 1) this.price = 2;
					else if (this.price == 2) this.price = 1;
					this.stock = 0;
					break;
				case 3:
					if (this.stock == 0) this.stock = 1;
					else if (this.stock == 1) this.stock = 2;
					else if (this.stock == 2) this.stock = 1;
					this.price = 0;
					break;
				case 4:
					this.price = 0;
					this.stock = 0;
					break;
			}
			if (n === 1) {
				this.loadend = false;
				this.$set(this.where, "page", 1);
				this.get_product_list(true);
			} else {
				this.nows = 1;
			}
		},
		//设置where条件
		setWhere: function () {
			if (this.price == 0) this.where.priceOrder = "";
			else if (this.price == 1) this.where.priceOrder = "asc";
			else if (this.price == 2) this.where.priceOrder = "desc";
			if (this.stock == 0) this.where.salesOrder = "";
			else if (this.stock == 1) this.where.salesOrder = "asc";
			else if (this.stock == 2) this.where.salesOrder = "desc";
			this.where.news = this.nows === 4 ? 1 : 0;
		},
		//查找产品
		get_product_list: function (isPage) {
			let that = this;
			that.setWhere();
			if (that.loadend) return;
			if (that.loading) return;
			if (isPage === true) that.$set(that, "productList", []);
			that.loading = true;
			that.loadTitle = "";
			if (this.merId > 0) that.where.merId = that.merId;
			let params = {
				...that.where,
			};
			if (!params.cid) {
				delete params.cid;
			}
			this.merId === 0
				? getProductslist(params)
						.then((res) => {
							let list = res.data.list;
							let productList = that.$util.SplitArray(list, that.productList);
							let loadend = list.length < that.where.limit;
							that.loadend = loadend;
							that.loading = false;
							that.loadTitle = loadend
								? "已全部加载"
								: this.$t(`page.goodsList.more`);
							that.$set(that, "productList", productList);
							that.$set(that.where, "page", that.where.page + 1);
							this.isShow = true;
						})
						.catch((err) => {
							that.loading = false;
							that.loadTitle = this.$t(`page.goodsList.more`);
						})
				: getMerProListApi(that.where)
						.then((res) => {
							let list = res.data.list;
							let productList = that.$util.SplitArray(list, that.productList);
							let loadend = list.length < that.where.limit;
							that.loadend = loadend;
							that.loading = false;
							that.loadTitle = loadend
								? "已全部加载"
								: this.$t(`page.goodsList.more`);
							that.$set(that, "productList", productList);
							that.$set(that.where, "page", that.where.page + 1);
						})
						.catch((err) => {
							that.loading = false;
							that.loadTitle = this.$t(`page.goodsList.more`);
						});
		},
	},
	onReachBottom() {
		if (this.productList.length > 0) {
			this.get_product_list();
		} else {
			//this.get_host_product();
		}
	},
};
</script>

<style scoped lang="scss">
.goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 20rpx;
	width: 100%;
}
.proList {
	margin-top: 230rpx;
	background: #fff;
	padding-top: 30rpx;
	min-height: 100vh;
}
.proList2 {
	margin-top: 330rpx;
}
.merList {
	position: relative;
	top: 200rpx;
	z-index: 66;
}
.merBox {
	::v-deep .tui-drawer-container {
		width: 635rpx;
	}
}
.mer {
	&-nav {
		top: 80rpx !important;
		border-radius: inherit !important;
	}
	&-list {
		margin-top: 288rpx !important;
	}
	&-listBox {
		position: relative;
		min-height: 100vh;
		// top: -68rpx;
	}
	&-mt194 {
		margin-top: 356rpx !important;
	}
}
.no-shop {
	margin-top: 6rpx;
	background-color: #fff;
	padding-bottom: calc(100% - 109rpx);
	.pictrue {
		display: flex;
		flex-direction: column;
		align-items: center;
		//color: $uni-nothing-text;
		image {
			width: 414rpx;
			height: 380rpx;
		}
	}
}
.store-item {
	margin-bottom: 30rpx;
	padding: 24rpx 30rpx 30rpx 30rpx;
	background-color: #fff;

	.head {
		display: flex;
		justify-content: space-between;

		.left-wrapper {
			display: flex;
			align-items: center;

			.logo {
				width: 92rpx;
				height: 92rpx;

				image {
					width: 92rpx;
					height: 92rpx;
					border-radius: 6rpx;
				}
			}

			.con-box {
				margin-left: 20rpx;

				.font-bg-red {
					width: max-content;
					white-space: nowrap;
					font-size: 18rpx;
					padding: 2rpx 10rpx;
					color: #ffffff;
					@include main_bg_color(theme);
					border-radius: 13rpx;
				}

				.name {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 10rpx;
					.mer_name {
						max-width: 400rpx;
					}
				}
			}
		}

		.link {
			width: 114rpx;
			height: 50rpx;
			line-height: 50rpx;
			@include linear-gradient(theme);
			border-radius: 25rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
	}

	.pic-wrapper {
		display: flex;
		margin-top: 30rpx;

		.pic-item {
			position: relative;
			width: 214rpx;
			height: 214rpx;
			margin-right: 24rpx;

			image {
				width: 214rpx;
				height: 214rpx;
				border-radius: 16rpx;
			}

			.price {
				position: absolute;
				right: 0;
				bottom: 0;
				height: 36rpx;
				padding: 0 10rpx;
				line-height: 36rpx;
				text-align: center;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 16rpx 2rpx 16rpx 2rpx;
				color: #fff;
				font-size: 24rpx;

				text {
					font-size: 18rpx;
				}
			}

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}
.with50 {
	width: 50% !important;
}
.nav-wrapper {
	z-index: 9;
	width: 100%;
	@include main_bg_color(theme);

	.tab-bar {
		display: flex;
		align-items: center;
		height: 100rpx;

		.tab-item {
			position: relative;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 40rpx;
			color: rgba(255, 255, 255, 0.7);
			font-size: 28rpx;
			font-weight: bold;

			&.on {
				color: #fff;
				&::after {
					content: " ";
					position: absolute;
					left: 50%;
					bottom: 15rpx;
					width: 60rpx;
					height: 3rpx;
					background: transparent;
					transform: translateX(-50%);
					background: #fff;
				}
			}
		}
	}
}

.bg_color {
	@include main_bg_color(theme);
}

.font_color {
	@include main_color(theme);
}

.x-money {
	font-size: 38rpx;
	@include price_color(theme);
}

.iconfont {
	//color: #fff;
}

.listBox {
	margin-top: 220rpx !important;
}

.fixed-top {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}

.productList .search {
	width: 100%;
	height: 86rpx;
	padding-left: 30rpx;
	box-sizing: border-box;
}

.productList .search .input {
	width: 630rpx;
	height: 60rpx;
	background-color: #fff;
	border-radius: 50rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.productList .search .input input {
	width: 528rpx;
	height: 100%;
	font-size: 26rpx;
}

.productList .search .input .placeholder {
	color: #999;
}

.productList .search .input .iconfont {
	font-size: 35rpx;
	color: #555;
}

.productList .search .icon-yangshi1,
.icon-shaixuan {
	color: #fff;
	width: 62rpx;
	font-size: 40rpx;
	height: 86rpx;
	line-height: 86rpx;
}

.productList .nav {
	// height: 86rpx;
	color: #454545;
	left: 0;
	width: 100%;
	font-size: 28rpx;
	line-height: 28rpx;
	background-color: #fff;
	z-index: 9;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	height: 80rpx;
	padding: 24rpx 0;
	box-sizing: content-box;
}

.productList .nav .item {
	width: 33.3%;
	text-align: center;
}

.productList .nav .item.font-color {
	font-weight: bold;
}

.productList .nav .item image {
	width: 15rpx;
	height: 19rpx;
	margin-left: 10rpx;
}

.productList .list {
	padding: 10rpx 30rpx 0 30rpx;
}

.productList .list.on {
	border-radius: 14rpx;
	margin-top: 0 !important;
	background-color: #fff;
	// padding: 40rpx 0 0 0;
	border-top: 1px solid #f6f6f6;
	// margin: 20rpx 0;
	// background-color: #fff;
}

.productList .list .item {
	width: 335rpx;
	background-color: #fff;
	border-radius: 14rpx;
	margin-bottom: 20rpx;
}

.productList .list .item.on {
	width: 100%;
	display: flex;
	padding: 0 0rpx 50rpx 0rpx;
	margin: 0;
	border-radius: 14rpx;
}

.productList .list .item .pictrue {
	position: relative;
	width: 100%;
	height: 335rpx;
}

.productList .list .item .pictrue.on {
	width: 260rpx;
	height: 260rpx;
}

.productList .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
}

.productList .list .item .pictrue image.on {
	border-radius: 6rpx;
}

.productList .list .item .text {
	padding: 18rpx 20rpx;
	font-size: 30rpx;
	color: #222;
}

.productList .list .item .text.on {
	width: 456rpx;
	padding: 0 0 0 20rpx;
}

.productList .list .item .text .money {
	font-size: 26rpx;
	font-weight: bold;
	margin-top: 8rpx;
}

.productList .list .item .text .money.on {
	margin-top: 50rpx;
}

.productList .list .item .text .money .num {
	font-size: 34rpx;
}

.productList .list .item .text .vip {
	font-size: 22rpx;
	color: #aaa;
	margin-top: 7rpx;
}

.productList .list .item .text .vip.on {
	margin-top: 90rpx;
}

.productList .list .item .text .vip .vip-money {
	font-size: 24rpx;
	color: #282828;
	font-weight: bold;
}

.productList .list .item .text .vip .vip-money image {
	width: 46rpx;
	height: 21rpx;
	margin-left: 4rpx;
}

.noCommodity {
	background-color: #fff;
	padding-bottom: 30rpx;
	// position: relative;
	top: 300rpx;
}
.noCommodity2 {
	background-color: #fff;
	padding-bottom: 30rpx;
	// position: relative;
	top: 90rpx;
}
.topFixed {
	position: fixed;
	z-index: 99;
	width: 100%;
}
</style>
